<style lang="scss">
    .mod.vertical.animated.button {
        padding: 7px 0;
        padding-left: 13px;
        width: 40px;

        .hidden.content {
            white-space: nowrap;
            padding: 0 2px;
            width: 100%;
            text-align: center;
            overflow: hidden;
            font-size: 12px;
            line-height: 11px;

            > span {
                display: inline-block;
            }
        }

        &.RockAndRoll:hover {
            .hidden.content > span {
                animation: hoverShowAll 2s linear .5s infinite alternate;
                @keyframes hoverShowAll {
                    from {
                        transform: translate3d(0, 0, 0);
                    }
                    to {
                        transform: translate3d(-55%, 0, 0);
                    }
                }
            }
        }

    }
</style>
<script type="text/jsx">
    export default {
        name: 'ui-btn',
        props: {
            name: String,
            value: Object,
            type: String,
            icon: String,
            tip: {
                type: Boolean,
                default: false
            }
        },
        computed: {
            cname() {
                return this.name.trim()
            }
        },
        data() {
            return {
                vdom: null, //刷新专用
                basicClass: this.tip ? 'ui mini compact icon basic button' : 'ui vertical animated mini button mod basic',
                theClass: this.tip ? `ui mini compact icon button ${ this.type || 'basic' }` : `ui vertical animated mini button mod ${ this.type || 'basic' }`,
                theIcon: this.icon || 'code'
            }
        },
        render() {
            if (this.tip) {
                return (
                    <el-tooltip effect="dark" content={ this.name } placement="bottom-start" open-delay={ 500 }>
                        <a class={ this.theClass } onClick={ this.onClick }>
                            <i class="icon" class={ this.theIcon }></i>
                        </a>
                    </el-tooltip>
                )
            }else{
                return (
                    <div class={ this.theClass } onClick={ this.onClick } onMouseover={ this.getMov }>
                        <div class="hidden content">
                            <span>{ this.name }</span>
                        </div>
                        <div class="visible content">
                            <i class={ this.theIcon }></i>
                            { this.loadingIt }
                        </div>
                    </div>
                )
            }
        },
        watch: {
            'vdom.tabObj.loading'(v) { //刷新专用
                if (this.name === '刷新') {
                    v ? this.theClass = this.basicClass + ' loading' : this.theClass = this.basicClass
                }
            }
        },
        destroyed() {
            this.$eventHub.$off('reloadPage')
        },
        mounted() {
            //刷新专用
            if (this.cname === '刷新') {

                // 获取当前外壳节点,这样可以使用ui-get-table里面的功能
                this.vdom = this._getMain(this)

                // 监听刷新页面事件
                this.$eventHub.$on('reloadPage', (v) => {
                    if (v === 'reload') {
                        this.dataLoad()
                    }
                });

            }

            //保留字
            switch(this.cname){
                case '添加':
                case '增加':
                    this.theIcon = 'plus icon'
                    this.theClass = this.basicClass
                    break;
                case '刷新':
                    this.theIcon = 'refresh icon'
                    this.theClass = this.basicClass
                    break;
                default:
                    break;
            }
        },
        methods: {
            //递归找对象
            _getMain(par) {
                try{
                    if (par.tabObj && par.$$uiTableLoad) {
                        return par
                    }
                    return this._getMain(par['$parent'])
                }catch(err){
                    return false;
                }
            },
            //鼠标移动上去如果文字太长就滚动
            getMov(e) {
                if (e.target.className.indexOf('button mod') > 0) {
                    if (e.target.children[0].children[0].clientWidth > 41 && e.target.className.indexOf('RockAndRoll') < 0) {
                        e.target.className = e.target.className + ' RockAndRoll'
                    }
                }
            },
            onClick() {
                if (this.cname === '刷新') {
                    // 当有自定义事件就忽略默认事件
                    if (Object.keys(this.$listeners).length > 0) {
                        this.$emit('click')
                    }else{
                        this.dataLoad()
                    }
                }else{
                    this.$emit('click')
                }

            },
            //刷新专用
            dataLoad() {
                if (this.$listeners['reloadPage']) {
                    // 写了回调就使用自定义刷新功能
                    this.$emit('reloadPage')
                }else{
                    // 直接调用ui-get-table的刷新功能
                    this.vdom && this.vdom.$$reloadPage && this.vdom.$$reloadPage()
                }
            }

        }
    }
</script>
